<template>
	<view>
		<view class="head" @tap="back()">
			<image src="/static/wode/return.png" mode=""></image>
			<text>返回</text>
		</view>
		<view class="content_box">
			<earth :item="item" :isDetail='true' v-for="(item,index) in youquanList" :key="index"></earth>
		</view>
		<view class="comment-box">
			<view class="menu_box">
				<view class="" @tap="selectMenu(index)" v-for="(item,index) in menuList" :key="index" :class="{Active:index===menuIndex}">
					{{item.text}}({{item.count}})
					<view v-show="menuIndex===index" class="data-active">

					</view>
				</view>
			</view>
			<view class="" v-if="menuIndex==0">
				<view class="" v-if="giftList.length!==0">
					<view class="gift_item" v-for="(item,index) in giftList" :key="index">
						<view class="gift_left">
							<image class="headImg" :src="item.map.userinfo.avatar" mode=""></image>
							<view class="people_box">
								<view class="name_box">
									<text>{{item.map.userinfo.nick_name}}</text>
									<image v-if="item.map.userinfo.sex==1" class="sexImg" src="../../../static/man.png" mode=""></image>
									<image v-else class="sexImg" src="../../../static/woman.png" mode=""></image>
									<image v-if="item.map.userinfo.member_level==1" class="vipImg" src="../../../static/wode/huiyuan.png" mode=""></image>
									<image v-else-if="item.map.userinfo.member_level==2" class="vipImg" src="../../../static/wode/baijinhuiyuan.png"
									 mode=""></image>
									<image v-else-if="item.map.userinfo.member_level==3" class="vipImg" src="../../../static/wode/zuanshihuiyuan.png"
									 mode=""></image>
									<image v-else class="vipImg" src="../../../static/wode/huiyuan2.png" mode=""></image>
								</view>
								<view class="time_box">
									<image v-if="item.map.userinfo.national_flag!=''" class="countryImg" :src="item.map.userinfo.national_flag"
									 mode=""></image>
									<image v-else class="countryImg" src="" mode=""></image>
									<view class="time">{{item.create_time}}</view>
								</view>
							</view>
						</view>
						<view class="gift_mid">
							<view class="giftImg_box">
								<image v-if="item.giftinfo!=undefined" class="giftImg" :src="item.giftinfo.pic" mode=""></image>
								<text v-if="item.giftinfo!=undefined">{{item.giftinfo.gift_name}}</text>
							</view>
							<text>x{{item.gift_count}}</text>
						</view>
						<view class="gift_right">
							{{item.pay_count}}猫币
						</view>
					</view>
				</view>
				<view class="noData" v-else>
					暂无礼物
				</view>
			</view>
			<view class="" v-else-if="menuIndex==1">
				<view class="" v-if="shareList.length!==0">
					<view class="share_item" v-for="(item,index) in shareList" :key="index">
						<view class="gift_left" v-if="shareList.length!=0">
							<image class="headImg" :src="item.map.userinfo.avatar" mode=""></image>
							<view class="people_box">
								<view class="name_box">
									<text>{{item.map.userinfo.nick_name}}</text>
									<image v-if="item.map.userinfo.sex==1" class="sexImg" src="../../../static/man.png" mode=""></image>
									<image v-else class="sexImg" src="../../../static/woman.png" mode=""></image>
									<image v-if="item.map.userinfo.member_level==1" class="vipImg" src="../../../static/wode/huiyuan.png" mode=""></image>
									<image v-else-if="item.map.userinfo.member_level==2" class="vipImg" src="../../../static/wode/baijinhuiyuan.png"
									 mode=""></image>
									<image v-else-if="item.map.userinfo.member_level==3" class="vipImg" src="../../../static/wode/zuanshihuiyuan.png"
									 mode=""></image>
									<image v-else class="vipImg" src="../../../static/wode/huiyuan2.png" mode=""></image>
								</view>
								<view class="time_box">
									<image v-if="item.map.userinfo.national_flag!=''" class="countryImg" :src="item.map.userinfo.national_flag"
									 mode=""></image>
									<image v-else class="countryImg" src="" mode=""></image>
									<view class="time">{{item.create_time}}</view>
								</view>
							</view>
						</view>
						<text>分享到微博</text>
					</view>
				</view>
				<view class="noData" v-else>
					暂无分享
				</view>
			</view>

			<view class="comment" v-else-if="menuIndex==2">
				<!-- <view class="hot-comment">所有评论
					<text class="comment_count">({{comment_count}})</text>
				</view> -->
				<view class="scrllBox" v-if="commentList.length!==0">
					<view class="" v-for="(item,index) in commentList" :key="index">
						<view class="gift_left">
							<image class="headImg" :src="item.map.userinfo.avatar" mode=""></image>
							<view class="people_box">
								<view class="name_box">
									<text>{{item.map.userinfo.nick_name}}</text>
									<image v-if="item.map.userinfo.sex==1" class="sexImg" src="../../../static/man.png" mode=""></image>
									<image v-else class="sexImg" src="../../../static/woman.png" mode=""></image>
								</view>
								<view class="time_box">
									<image v-if="item.map.userinfo.national_flag!=''" class="countryImg" :src="item.map.userinfo.national_flag"
									 mode=""></image>
									<image v-else class="countryImg" src="" mode=""></image>
									<view class="time">{{item.create_time}}</view>
								</view>
							</view>
						</view>
						<view class="first_box">
							<view class="first_item">
								<image @tap="fanyiText(item.content,index)" class="fanyi" src="/static/jingyou/translate.png" mode=""></image>
								<view class="text_box">
									<text>{{item.content}}</text>
									<text v-if="index==textindex&&haveFanyi==true" class="fanyi_text">{{afterFanyi}}</text>
								</view>

							</view>
							<view class="like_box" @tap="dianzan(item.id,index)">
								<image v-if="item.map.is_like==true" src="/static/jingjie/hongxin.png" mode=""></image>
								<image v-else src="/static/jingjie/huixin.png" mode=""></image>
								<text>{{item.like_count}}</text>
							</view>
						</view>
						<view class="second_box" v-if="item.map.subComment.length!=0">
							<view class="" @tap="childeComment(item.id,item.map.subComment[0].map.userinfo.user_id,item.map.subComment[0].map.userinfo.nick_name)">
								<view class="sec_top">
									<image class="sec_head" :src="item.map.subComment[0].map.userinfo.avatar" mode=""></image>
									<text>{{item.map.subComment[0].map.userinfo.nick_name}}</text>
									<text class="toSomebody">回复</text>
									<text>{{item.map.subComment[0].map.replyinfo.nick_name}}</text>
								</view>
								<view class="sec_bottom">
									<image @tap="fanyiText(item.map.subComment[0].content,index,'child')" class="fanyi" src="/static/jingyou/translate.png"
									 mode=""></image>
									<view class="text_box">
										<text class="sec_text">{{item.map.subComment[0].content}}
											<text class="sec_time">{{item.map.subComment[0].create_time}}</text>
										</text>
										<text v-if="index==textindex&&haveChildFanyi==true" class="fanyi_text">{{afterFanyi}}</text>
									</view>

								</view>
							</view>
							<view class="like_box" @tap="dianzan(item.map.subComment[0].id,index,'child')">
								<image v-if="item.map.subComment[0].map.is_like==true" src="/static/jingjie/hongxin.png" mode=""></image>
								<image v-else src="/static/jingjie/huixin.png" mode=""></image>
								<text>{{item.map.subComment[0].like_count}}</text>
							</view>
						</view>
						<view class="more_box" v-if="item.map.subComment.length!=0">
							<view class="" @tap="toMoreComment">
								查看<text>{{item.map.subcount}}</text>条对话
								<image class="more_right" src="/static/jingjie/youjiantou.png" mode=""></image>
							</view>
							<text @tap="childeComment(item.id,item.map.userinfo.user_id,item.map.userinfo.nick_name)">回复</text>
						</view>
						
						
						
						<!--展示一级评论  评论详情-->
						<view class="comment-alert-box" v-if="isComment">
							<view class="comment-title-box common">
								<view></view>
								<view class="title">{{item.map.subcount}}条对话</view>
								<image src="../../../static/jingjie/delete_h.png" @tap="closeComment()"></image>
							</view>
							<!--评论内容-->
							<view>
								<view class="comment-conent-box">
									<view class="first-level-comment">
										<image class="user-img" :src="item.map.userinfo.avatar"></image>
										<view class="comment-box-big">
											<view class="left-box">
												<view class="user-nickName">{{item.map.userinfo.nick_name}}</view>
												<view class="comment-content-box">{{item.content}}</view>
											</view>
											<view class="right-box">
												<view class="like-img-box" @tap="dianzan(item.id,index)">
													<image class="like-img" v-if="item.map.is_like" src="../../../static/jingjie/hongxin.png"></image>
													<image v-else class="like-img" src="../../../static/jingjie/huixin.png"></image>
												</view>
												<view class="like-num">{{item.like_count}}</view>
											</view>
										</view>
									</view>
									<view class="chakan-more two">
										<view class="more-left style" @tap="childeComment(item.id,item.map.userinfo.user_id,item.map.userinfo.nick_name,'del')">回复</view>
										<view class="more-right time-box">{{item.create_time}}</view>
									</view>
									<!--二级评论-->
									<scroll-view class="allComment" scroll-y>
										<view class="two-level-comment" v-for="(item2,index2) in item.map.subComment" :key="index2" @tap="childeComment(item.id,item2.map.userinfo.user_id,item.map.userinfo.nick_name,'del')">
											<image class="two-user-img" :src="item2.map.userinfo.avatar"></image>
											<view class="comment-box-big clearFlex">
												<view class="common">
													<view class="left-box">
														<view class="user-nickName">{{item2.map.userinfo.nick_name}}
															<text>回复</text>
															{{item2.map.replyinfo.nick_name}}
														</view>
														<!-- <view class="" v-if="item2.map.replyInfo.nick_name">
														
													</view> -->
														<view class="comment-content-box">{{item2.content}}<text class="time-box">{{item2.create_time}}</text></view>
													</view>
													<view class="right-box">
														<view class="like-img-box" @tap.stop="dianzan(item2.id,index,'delchild',index2)">
															<image class="like-img" v-if="item2.map.is_like==true" src="../../../static/jingjie/hongxin.png"></image>
															<image v-else class="like-img" src="../../../static/jingjie/huixin.png"></image>
														</view>
														<view class="like-num">{{item2.like_count}}</view>
													</view>
												</view>
												<!-- <view class="twoComment common">
													<view class="huifu">回复</view>
													<view class="remove" v-show="isMe" @tap="deletComment">删除</view>
												</view> -->
											</view>
										</view>
									</scroll-view>
								</view>
								<view class="border-box"></view>
							</view>
						</view>

					</view>
				</view>
				<view class="noData" v-else>
					暂无评论
				</view>

			</view>
			<view class="" v-else-if="menuIndex==3">
				<view class="" v-if="likeList.length!==0">
					<view class="share_item dainzan_item" v-for="(item,index) in likeList" :key="index">
						<view class="gift_left">
							<image class="headImg" :src="item.map.userinfo.avatar" mode=""></image>
							<view class="people_box">
								<view class="name_box">
									<text>{{item.map.userinfo.nick_name}}</text>
									<image v-if="item.map.userinfo.sex==1" class="sexImg" src="../../../static/man.png" mode=""></image>
									<image v-else class="sexImg" src="../../../static/woman.png" mode=""></image>
									<image v-if="item.map.userinfo.member_level==1" class="vipImg" src="../../../static/wode/huiyuan.png" mode=""></image>
									<image v-else-if="item.map.userinfo.member_level==2" class="vipImg" src="../../../static/wode/baijinhuiyuan.png"
									 mode=""></image>
									<image v-else-if="item.map.userinfo.member_level==3" class="vipImg" src="../../../static/wode/zuanshihuiyuan.png"
									 mode=""></image>
									<image v-else class="vipImg" src="../../../static/wode/huiyuan2.png" mode=""></image>
								</view>
								<view class="time_box">
									<image v-if="item.map.userinfo.national_flag!=''" class="countryImg" :src="item.map.userinfo.national_flag"
									 mode=""></image>
									<image v-else class="countryImg" src="" mode=""></image>
									<view class="time">{{item.create_time}}</view>
								</view>
							</view>
						</view>
						<image class="dianzan" src="/static/diqiuquan/dianzan.png" mode=""></image>
					</view>
				</view>
				<view class="noData" v-else>
					暂无点赞
				</view>
			</view>
		</view>
		<view class="write_box" v-if="iskeyFrame==false">
			<!-- <input @focus="showComment" type="text" value="" placeholder="写评论" /> -->
			<view class="inputBox" @tap="showComment">
				写评论
			</view>
			<image @tap="toGift" src="/static/diqiuquan/liwu.png" mode=""></image>
			<!-- <image @tap="toShare" src="/static/diqiuquan/fenxiang.png" mode=""></image> -->
			<button open-type="share" plain="true" style=" width:23px; height:23px; border: #FFFFFF solid 1upx;" @tap="onShareAppMessage">
				<image class="shareImg" src="/static/diqiuquan/fenxiang.png"></image>
			</button>
			<image @tap="todianzan" src="/static/diqiuquan/dianzan.png" mode=""></image>
		</view>
		<keyFrame @toComment="toComment" :isShow="iskeyFrame" @loseFocus="loseFocus" :focusState="focusState" :huifuname="huifuname"></keyFrame>
		<gift :isshowGift='isshowGift' :cat_coin='myInfo.cat_coin' :pay_id='pay_id' :payment_id='payment_id' @hideAll='hideAll'></gift>
		<mask :isShowMask='isShowMask' @closeMask='closeMask'></mask>
		<!-- <share :isshowShare='isshowShare' @closeShare='closeShare':itemData='youquanList' :shareType='"earth"'></share> -->

	</view>
</template>

<script>
	import earth from '../../../components/earth'
	import keyFrame from '../../../components/keyFrame.vue'
	import mask from '../../../components/mask.vue'
	import gift from '../../../components/gift.vue'
	// import share from '../../../components/share.vue'
	import {
		language
	} from '../../../common/country.js'
	export default {
		components: {
			earth,
			keyFrame,
			mask,
			gift,
			// share
		},
		data() {
			return {
				id: '',
				youquanList: '',
				isDetail: true,
				nullComment: false, //是否有评论
				comment_count: '',
				menuList: [{
					text: '礼物',
					count: '',
				}, {
					text: '转发',
					count: '',
				}, {
					text: '评论',
					count: '',
				}, {
					text: '点赞',
					count: '',
				}],
				menuIndex: 0,
				commentList: [],
				payment_id: '', //用户id
				pay_id: '', //球圈id
				user_id: '', //自己的id
				giftList: [], //礼物列表
				shareList: [], //分享列表
				likeList: [], //点赞列表
				iskeyFrame: false,
				ischild: false, //判断是否是二级评论
				huifuname: '',
				isComment:'',//评论详情
				isshowGift: false,
				isShowMask: false,
				isshowShare: false,
				myInfo: '',
				afterFanyi: '', //翻译后的文字
				haveFanyi: false, //显示翻译
				haveChildFanyi: false,
				textindex: '', //翻译索引
				language: language,
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getData()
			this.myInfo = uni.getStorageSync('user_info')
			// this.getcommentList()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},

			getData() {
				var me = this;
				var data = {
					id: this.id,
					oper_id: uni.getStorageSync('user_id'),
					pageSize: 1,
				}
				this.myAjaxNew({
					model: 'message',
					controllerName: 'noteUser',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						// console.log(res)
						me.youquanList = res.data.data
						me.comment_count = res.data.data[0].comment_count
						me.pay_id = res.data.data[0].id
						me.payment_id = res.data.data[0].map.userinfo.user_id
						me.menuList[0].count = res.data.data[0].map.giftCount
						me.menuList[1].count = res.data.data[0].share_count
						me.menuList[2].count = res.data.data[0].comment_count
						me.menuList[3].count = res.data.data[0].like_count

						if (res.data.data[0].map.noteDetailsComment != undefined && res.data.data[0].map.noteDetailsComment.length !=
							0) {
							me.commentList = res.data.data[0].map.noteDetailsComment
							for (var i = 0; i < me.commentList.length; i++) {
								me.commentList[i].create_time = me.myDate.getDateDiff(me.commentList[i].create_time)
								if (me.commentList[i].map.subComment.length != 0) {
									for (var j = 0; j < me.commentList[i].map.subComment.length; j++) {
										me.commentList[i].map.subComment[j].create_time = me.myDate.getDateDiff(me.commentList[i].map.subComment[j]
											.create_time)
									}
								}
							}
							console.log(me.commentList, '评论')
						} else {
							me.nullComment = true
						}
						me.getGift()
						console.log(me.youquanList, '球圈数据')
					},
				})

			},
			showComment() {
				console.log(1)
				this.iskeyFrame = true;
				this.ischild = false;
				this.menuIndex = 2
			},
			dianzan(id, index, child,index2) {
				var me = this;
				var data = {
					history_id: id,
					operation_type: 'like',
					history_type: 'notecomment',
					user_id: uni.getStorageSync('user_id')
				}
				this.myAjaxNewPost({
					model: 'message',
					controllerName: 'history',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res)
						if (res.data.message == '成功') {
							if (child == 'child') {
								if (me.commentList[index].map.subComment[0].map.is_like == false) {
									me.commentList[index].map.subComment[0].map.is_like = true
									me.commentList[index].map.subComment[0].like_count++
								} else {
									me.commentList[index].map.subComment[0].map.is_like = false
									me.commentList[index].map.subComment[0].like_count--
								}
							}else if(child=='delchild'){
								if(me.commentList[index].map.subComment[index2].map.is_like==false){
									me.commentList[index].map.subComment[index2].map.is_like=true
									me.commentList[index].map.subComment[index2].like_count++
								}else{
									me.commentList[index].map.subComment[index2].map.is_like=false
									me.commentList[index].map.subComment[index2].like_count--
								}
							} else {
								if (me.commentList[index].map.is_like == false) {
									me.commentList[index].map.is_like = true
									me.commentList[index].like_count++
								} else {
									me.commentList[index].map.is_like = false
									me.commentList[index].like_count--
								}
							}
						}
					}
				})
			},
			selectMenu(index) {
				this.menuIndex = index;
				this.$emit('switchTab', index)
				if (this.menuIndex == 0) {
					this.getGift()
				} else if (this.menuIndex == 1) {
					this.getShare()
				} else if (this.menuIndex == 3) {
					this.getLike()
				}
			},
			getGift() {
				var me = this;
				var data = {
					type: 'gift',
					source: 'note',
					pay_id: this.pay_id,
					payment_id: this.payment_id
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userOrder',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						me.giftList = res.data.data
						for (var i = 0; i < me.giftList.length; i++) {
							me.giftList[i].giftinfo = res.data.data[i].map.giftinfo[0]
							// me.giftList[i].giftinfo=1
							me.giftList[i].create_time = me.myDate.getDateDiff(me.giftList[i].create_time)
						}
						// console.log(me.giftList, '礼物列表')

					}
				})
			},
			getShare() {
				var me = this;
				var data = {
					operation_type: 'share',
					history_type: 'note',
					history_id: this.pay_id,
				}
				this.myAjaxNew({
					model: 'message',
					controllerName: 'history',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						// console.log(res, '分享')
						if (res.data.data.length !== 0) {
							me.shareList = res.data.data
							for (var i = 0; i < me.shareList.length; i++) {
								me.shareList[i].create_time = me.myDate.getDateDiff(me.shareList[i].create_time)
							}
						}
					}
				})
			},
			getLike() {
				var me = this;
				var data = {
					operation_type: 'like',
					history_type: 'note',
					history_id: this.pay_id,
					status: 1
				}
				this.myAjaxNew({
					model: 'message',
					controllerName: 'history',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						console.log(res, '点赞')
						if (res.data.data.length != 0) {
							me.likeList = res.data.data
							for (var i = 0; i < me.likeList.length; i++) {
								me.likeList[i].create_time = me.myDate.getDateDiff(me.likeList[i].create_time)
							}
						}


					}
				})
			},
			loseFocus() {
				this.iskeyFrame = false
			},
			toMoreComment(){
				this.isComment=true
			},
			closeComment(){
				this.isComment=false
			},
			childeComment(parent_id, reply_id, name) {
				this.iskeyFrame = true
				this.parent_id = parent_id
				this.reply_id = reply_id
				this.huifuname = name
				this.ischild = true
			},
			toComment(content) {
				var me = this;
				this.content = content;
				if (this.ischild == true) {
					var data = {
						content: content,
						note_id: this.pay_id, //地球圈id
						user_id: uni.getStorageSync('user_id'),
						parent_id: this.parent_id, //
						is_reply: true,
						reply_id: this.reply_id, //回复id
					}
				} else {
					var data = {
						content: content,
						note_id: this.pay_id,
						user_id: uni.getStorageSync('user_id')
					}
				}
				this.myAjaxNewPost({
					model: 'message',
					controllerName: 'noteComment',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res)
						if (res.data.message == '成功') {
							// 							if (this.ischild == true) {
							// 								var comment = {
							// 									content: me.content,
							// 									is_reply: true,
							// 									map: {
							// 										userinfo: {
							// 											nick_name: uni.getStorageSync('nick_name')
							// 										},
							// 										replyinfo: {
							// 											nick_name: me.huifuname
							// 										}
							// 									}
							// 								}
							// 								
							// 							} else {
							// 								var comment = {
							// 									content: me.content,
							// 									map: {
							// 										userinfo: {
							// 											nick_name: uni.getStorageSync('nick_name')
							// 										},
							// 									}
							// 								}
							// 							}
							// 
							// 							me.commentList.map.noteCommentEntities.splice(0, 0, comment)
						}
					}
				})

			},
			fanyiText(content, index, type) {
				var me = this;
				this.textindex = index;
				var appid = '20190402000283752';
				var key = 'eLYpGzpGPrAKTE0dOzUJ';
				var salt = (new Date).getTime();
				var query = content;
				// 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
				var _from = 'auto';

				var str1 = appid + query + salt + key;
				var sign = this.MD5(str1);
				var to = ''
				if (this.myInfo.mother_tongue == '') {
					uni.navigateTo({
						url: '/pages/Other/countrySelect?type=母语'
					})
					uni.showToast({
						title: '请选择母语',
						icon: 'none'
					})
				} else {
					// for (var i = 0; i < this.language.length; i++) {
					// 	if (this.myInfo.mother_tongue == this.language[i].name) {
					// 		var to = this.language[i].Abbreviation
					// 	}
					// }
					for (var i = 0; i < this.language.length; i++) {
						if (this.myInfo.mother_tongue == this.language[i].name || this.myInfo.mother_tongue == this.language[i].enName) {
							to = this.language[i].Abbreviation
						}
					}
					if (this.myInfo.mother_tongue == '汉语' || this.myInfo.mother_tongue == '中文') {
						to = 'zh'
					}
				}
				if (_from == to) {
					uni.showToast({
						title: '已经是母语了哦',
						icon: 'none'
					})
					return
				}
				var data = {
					q: query,
					appid: appid,
					salt: salt,
					from: _from,
					to: to,
					sign: sign
				}
				uni.request({
					url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
					method: 'GET',
					data: data,
					success(res) {
						console.log(res)
						if (type == 'child') {
							me.haveChildFanyi = true
							me.haveFanyi = false

						} else {
							me.haveFanyi = true
							me.haveChildFanyi = false
						}
						me.afterFanyi = res.data.trans_result[0].dst
					},
					fail() {
						uni.showToast({
							title: '请求数据失败',
							icon: "none"
						});
					},
				})

			},
			todianzan() {
				var me = this;
				var data = {
					history_id: this.pay_id,
					operation_type: 'like',
					history_type: 'note',
					user_id: uni.getStorageSync('user_id')
				}
				this.myAjaxNewPost({
					model: 'message',
					controllerName: 'history',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res, '点赞')
						uni.showToast({
							title: '点赞',
							icon: 'none'
						})
					}
				})
			},
			toGift() {
				this.isshowGift = true;
				this.isShowMask = true;
				// console.log(this.pay_id)
			},
			hideAll() {
				this.isShowMask = false
				this.isshowGift = false
			},
			closeMask() {
				this.isShowMask = false
				this.isshowGift = false
				this.isshowShare = false
			},
			toShare() {
				this.isshowShare = true
				this.isShowMask = true
				// this.itemData=this.youquanList
			},
			closeShare() {
				this.isShowMask = false
				this.isshowShare = false
			}
		}
	}
</script>

<style scoped>
	.head {
		height: 128upx;
		width: 100%;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 24upx;
		color: #666666;
		font-size: 32upx;
		position: fixed;
		top: 0;
		z-index: 1000;
		padding-top: 40upx;
	}

	.head image {
		width: 21upx;
		height: 36upx;
		margin-right: 10upx;
	}

	.content_box {
		padding-top: 128upx;
		border-top: 1upx solid #e6e6e6;

	}


	/* 评论 */
	.scrllBox {
		background: #FFFFFF;
		padding: 24upx;
		height: 100%;
		margin-top: 24upx;
	}

	.first_top {
		display: flex;
	}

	.first_headImg {
		height: 68upx;
		width: 68upx;
	}

	.first_top_right {
		display: flex;
		flex-direction: column;
	}

	.first_name {
		display: flex;
		align-items: center;
	}

	.first_name image {
		width: 23upx;
		height: 23upx;
	}

	.first_time {
		height: 23upx;
		background: #999999;
		border-radius: 23upx;
		opacity: 0.6;
		color: #FFFFFF;
		font-size: 14upx;
	}

	.first_time image {
		width: 28upx;
		height: 28upx;
	}

	.comment-box {
		margin-bottom: 98upx;
	}

	.menu_box {
		width: 100%;
		background-color: white;
		height: 100upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #999999;
		font-size: 30upx;
		padding-top: 40upx;
		/* padding-bottom: 26upx; */
		width: 100%;
	}

	.data-active {
		height: 6upx;
		background-color: #46CECF;
		border-radius: 8upx;
		position: relative;
		top: 25upx;
	}

	.Active {
		color: #46CECF;
	}

	.gift_item {
		display: flex;
		align-items: center;
		padding: 28upx 24upx;
		justify-content: space-between;
		position: relative;
		border-bottom: 1upx solid #E6E6E6;
	}

	.gift_left {
		display: flex;
		font-size: 24upx;
		margin-top: 20upx;
	}

	.headImg {
		height: 68upx;
		width: 68upx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10upx;
	}

	.people_box {
		display: flex;
		flex-direction: column;
	}

	.name_box {
		display: flex;
		align-items: center;
		margin-bottom: 10upx;
	}

	.sexImg {
		height: 23upx;
		width: 23upx;
		margin: 0 4upx;
	}

	.vipImg {
		height: 22upx;
		width: 22upx;
	}

	.countryImg {
		height: 28upx;
		width: 28upx;
		position: absolute;
		z-index: 30;
		bottom: 0upx;
		left: -1upx;
	}

	.time_box {
		position: relative;
	}

	.time {
		height: 23upx;
		line-height: 23upx;
		background: rgba(153, 153, 153, 1);
		border: 2upx solid rgba(153, 153, 153, 1);
		opacity: 0.6;
		border-radius: 12upx;
		color: rgba(254, 254, 254, 1);
		font-size: 14upx;
		max-width: 84upx;
		padding-left: 35upx;
	}

	.giftImg {
		width: 70upx;
		height: 80upx;
	}

	.giftImg_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20upx;
	}

	.gift_mid {
		display: flex;
		align-items: center;
		color: #999999;
		font-size: 20upx;
		position: absolute;
		left: 380upx;
	}

	.gift_right {
		color: #999999;
		font-size: 24upx;
	}

	.share_item {
		display: flex;
		align-items: center;
		padding: 28upx 24upx;
		position: relative;
		border-bottom: 1upx solid #E6E6E6;
	}

	.share_item text {
		color: #333333;
		font-size: 26upx;
	}

	.first_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 20upx;
	}

	.first_item {
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 26upx;
	}

	.like_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #666666;
		font-size: 20upx;
	}

	.like_box image {
		width: 32upx;
		height: 28upx;
	}



	.fanyi {
		width: 36upx;
		height: 36upx;
		margin-right: 12upx;
	}

	.second_box {
		background: #E6E6E6;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16upx 12upx;
		margin-left: 20upx;
	}

	.sec_top {
		display: flex;
		color: #999999;
		font-size: 24upx;
		margin-bottom: 6upx;
	}

	.sec_head {
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10upx;
	}

	.toSomebody {
		margin: 0 10upx;
	}

	.sec_text {
		color: #333333;
		font-size: 26upx;
		max-width: 490upx;
	}

	.sec_time {
		color: #999999;
		font-size: 20upx;
		margin-left: 20upx;

	}

	.sec_bottom {
		display: flex;
		/* align-items: flex-end; */
	}

	.more_right {
		width: 20upx;
		height: 20upx;
		margin-right: 50upx;
		margin-left: 10upx;
	}

	.more_box {
		display: flex;
		align-items: center;
		color: #666666;
		font-size: 24upx;
		padding-left: 20upx;
		margin-top: 20upx;
	}

	.text_box {
		display: flex;
		flex-direction: column;
	}

	.fanyi_text {
		color: #333333;
		font-size: 26upx;
	}

	.dianzan {
		width: 43upx;
		height: 39upx;
	}

	.dainzan_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.write_box {
		width: 100%;
		height: 98upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24upx;
		box-sizing: border-box;
	}

	.write_box input {
		width: 388upx;
		height: 64upx;
		border: 1upx solid #E6E6E6;
		font-size: 26upx;
		margin-right: 30upx;
	}

	.write_box image {
		width: 44upx;
		height: 44upx;
	}

	.noData {
		width: 100%;
		text-align: center;
		line-height: 300upx;
		color: #999999;
		font-size: 28upx;
	}

	.shareImg {
		width: 22upx;
		height: 22upx;
		position: absolute;
		left: 0upx;
		top: 0upx;
	}
	
	
	/**评论弹框**/
	.comment-alert-box {
		width: 98%;
		height: 1175upx;
		background: white;
		border-radius: 10upx 10upx 0upx 0upx;
		position: fixed;
		bottom: 0;
		z-index: 2000;
		padding-right: 24upx;
	}
	
	.comment-title-box {
		padding-bottom: 47upx;
		padding: 28upx 24upx;
		box-sizing: border-box;
	}
	
	.title {
		font-size: 24upx;
		color: rgba(153, 153, 153, 1);
	}
	
	.comment-title-box image {
		width: 19upx;
		height: 19upx;
	}
	
	.comment-conent-box {
		width: 100%;
		/* padding: 0 24upx; */
		box-sizing: border-box;
		z-index: 3000;
	}
	
	.comment-conent-box.yi {
		padding: 0;
		margin-top: 18upx;
	}
	
	.first-level-comment {
		display: flex;
		width: 98%;
	}
	
	.user-img {
		width: 68upx;
		height: 68upx;
		border-radius: 68upx;
		margin-right: 10upx;
	}
	
	.left-box {
		max-width: 430upx;
	}
	
	.user-nickName {
		font-size: 24upx;
		color: rgba(153, 153, 153, 1);
	}
	
	.user-nickName text {
		margin: 0 20upx;
	}
	
	.comment-content-box {
		font-size: 26upx;
		color: rgba(51, 51, 51, 1);
	}
	
	.huifu {
		color: rgba(153, 153, 153, 1);
		font-size: 20upx;
	}
	
	.remove {
		color: rgba(51, 51, 51, 1);
		font-size: 24upx;
	}
	
	.border-box {
		width: 100%;
		height: 1upx;
		background: rgba(230, 230, 230, 1);
		margin-top: 20upx;
	}
	
	.time-box {
		font-size: 20upx;
		margin-left: 20upx;
		color: rgba(153, 153, 153, 1);
	}
	
	.twoComment {
		width: 100%;
		margin-top: 20upx;
	}
	
	.like-img-box {
		width: 50upx;
		text-align: center;
	}
	
	.like-img {
		width: 32upx;
		height: 28upx;
	}
	
	.like-num {
		width: 50upx;
		text-align: center;
		font-size: 20upx;
		color: rgba(102, 102, 102, 1);
	}
	
	.two-level-comment {
		width: 620upx;
		display: flex;
		padding-left: 12upx;
		padding-bottom: 20upx;
		margin-left: 68upx;
		margin-top: 20upx;
		padding-top: 15upx;
		background: rgba(230, 230, 230, 1);
		border-radius: 10upx;
	}
	
	.clearFlex {
		display: block;
	}
	
	.two-user-img {
		width: 40upx;
		height: 40upx;
		border-radius: 40upx;
		margin-right: 10upx;
	}
	
	.xiala-big-box {
		display: flex;
		align-items: center;
		margin-left: 17upx;
	}
	
	.left-box-xiala {
		color: rgba(153, 153, 153, 1);
		font-size: 24upx;
	}
	
	.xiala {
		width: 18upx;
		height: 8upx;
		margin-left: 10upx;
	}
	
	.input-box {
		width: 100%;
		height: 88upx;
		background: white;
		position: fixed;
		z-index: 999;
		bottom: 0;
		padding: 0 24upx;
		box-sizing: border-box;
	}
	
	.inputBox {
		width: 418upx;
		font-size: 26upx;
		color: rgba(153, 153, 153, 1);
		border: 1px solid rgba(204, 204, 204, 1);
		border-radius: 10upx;
		padding-left: 15upx;
		margin-right: 20upx;
		height: 64upx;
		line-height: 64upx;
	}
	
	.smilingFace {
		width: 45upx;
		height: 45upx;
	}
	
	.shuliang {
		color: rgba(51, 51, 51, 1);
		font-size: 20upx;
		margin-left: 5upx;
	}
	
	.chakan-more {
		width: 620upx;
		display: flex;
		align-items: center;
		padding-left: 12upx;
		padding-bottom: 20upx;
		margin-left: 68upx;
		padding-top: 15upx;
	}
	
	.chakan-more.two {
		margin-top: 0upx;
		padding-top: 0upx;
		padding-bottom: 0upx;
	}
	
	.more-left {
		display: flex;
		align-items: center;
	}
	
	.style {
		color: rgba(51, 51, 51, 1);
		font-size: 24upx;
	}
	
	.more-left image {
		width: 19upx;
		height: 20upx;
		margin-left: 12upx;
		margin-right: 30upx;
	}
	
	.more-right {
		color: rgba(102, 102, 102, 1);
		font-size: 24upx;
	}
	
	.more-right1 {
		margin-left: 86upx;
		font-size: 24upx;
		color: #333333;
	}
	
	.more-right.close {
		margin-left: 0;
	}
	
	.wupinglun {
		line-height: 150upx;
		color: #333333;
		font-size: 24upx;
		text-align: center;
	}
	
	.allComment {
		height: 852upx;
	}
	.comment-box-big{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 90%;
	}
	.common{
		width: 100%;
	}
</style>
